<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你好啊！</title>
    <link rel="stylesheet" href="style.css">
  <style>
    .box{
        width: 50px;
        height: 50px;
        background-color: gold;

    }
    .A{
        display: flex;

    }
    h1{
        color: red;
        font-size: 50px;
        background-color: gold;
        background-image: url();
        background-size: 100px 50px;
        /* 背景图重复方式 */
        background-repeat: no-repeat;
        /* 背景图位置 */
        background-position: 10px 30px;
        width: 400px;
        height: 200px;
    }
    .main{
        width: 600px;
        height: 400px;
        background-color: pink;
        display: flex;
        /* 设置成列排 */
        flex-direction: column;
    }
    .main div{
        background-color: orange;
        border: 2px solid white;
    }
    .b{
        flex: 1;
    }
     .c{
        flex: 2;
    }
     .n{
        flex: 4;
    }
    .d{
        flex: 1;
        display: flex;
       
    }
  </style>
</head>
<body>
    
    <script>
        function Game(){
            this.username="JS",
            this.useremail="demo06",
            this.teacher="Mrwang"
            console.log("打印")
        }
        let obj1=new Game()
        console.log(obj1)
        function Class(x, y, z) {
             this.username=x,
            this.useremail=y,
            this.teacher=z,
            this.vv=name=>console.log(name)
        }
        let knm=new Class("joker","333232x","Misswrite")
      console.log(knm)
      knm.vv("hh")

      class Student{
        constructor(name,age){
            this.name=name
            this.age=age
           
            console.log("hi")
        }
        say(){
            console.log("你好")
        }
      }

      
      let hello=new Student("zhangsan",20)
       console.log(hello)
       hello.__proto__.height=180
        console.log(hello.height)
  console.log(hello.say())
       let obj={
            username:"wu",
            useremail:"709000@qq.com"
        }
         obj.password=136330112
            console.log(obj)
      let obje={
            username:"wu",
            useremail:"709000@qq.com",
            password:136330112
        }
        let a=Object.keys(obje)
        console.log(a)
        console.log(Object.values(obje))
        console.log(Object.entries(obje))
  </script>
  <div class="A">
    <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  </div>
  
<h1>你好</h1>
<h2>你好</h2>
<p>你好</p>
<a href="https://www.baidu.com/">
    <img src="pig.webp" alt="我就是太阳">
</a>
<!-- ../上一级目录 -->
 <!-- img/ -->
  <!-- 块级元素 （block element） -->
   <div>你好007</div>
   <!-- 行内元素 （inlineelement） -->
    <span>你好001</span>

    <!-- 弹性布局 -->
     <div class="main">
        <!-- 我们在容器里放入三个元素，看看效果。 -->
         <div class="b">我</div>
          <div class="c">love</div>
         <div class="d">
            <div class="b">myself</div>
            <div class="n">family</div>
         </div>
     </div>
</body>
</html>